<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/18
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>云和租房 -发布房屋信息</TITLE>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <LINK
            rel=stylesheet type=text/css href="../css/style.css">
    <script type="text/javascript" src="../scripts/function.js"></script>
    <script src="../scripts/jquery-1.8.3.js"></script>
    <META name=GENERATOR content="MSHTML 8.00.7601.17514">
    <style type="text/css">
        .houseinfo {
            width: 300px;
            float: left;
        }

        #houseImg {
            float: right;
        }

        .imgBox {
            width: 320px;
            text-align: center;
        }

        .small, .large {
            font-size: 0;
            outline: 1px solid burlywood;
            margin: auto;
        }

        .large, .small {
            margin: 20px auto;
        }

        .large {
            margin-left: 40px;
            position: absolute;
            display: none;
            z-index: 10;
        }

        .small, .small img, .large {
            width: 256px;
            height: 256px;
            overflow: hidden;
        }

        .large img {
            width: 900px;
            height: 600px;
        }

        .small {
            position: relative;
            display: inline-block;
        }

        .mark {
            opacity: 0.5;
            background-color: #DEB887;
            z-index: 55;
            width: 100px;
            height: 66.666666666px;
            display: none;
        }

        .mark, .large img {
            position: absolute;
            left: 0;
            top: 0;
        }

        #serchResult {
            background-color: #d9d9d9;
            position: absolute;
            margin-left: 76px;
            width: 500px;
            z-index: 10;
        }

        .serchback {
            background-color: #1f87dc;
            cursor: pointer;
        }
        .resultTitle{
            text-align: left;
        }
    </style>
</HEAD>
<BODY>

<DIV id=header class=wrap>
    <DIV id=logo><IMG src="../images/logo.gif"></DIV>
    <DIV class=search>
        <FORM action="serch_serchHouse" target="_blank" method=get><INPUT id="serch" class=text type=text name="house.title">
            <LABEL class="ui-green searchs">
            <input type="submit" value="搜索">
            </LABEL>
            <div id="serchResult"></div>
        </FORM>
    </DIV>
</DIV>
<DIV id=navbar class=wrap>
    <DL class="search clearfix">
        <FORM id=sform method=post action=search.action>
            <DT>
                <UL>
                    <LI class=bold>房屋信息</LI>
                    <LI>标题：<INPUT class=text type=text name=title> <LABEL class=ui-blue><INPUT onclick=doSearch()
                                                                                               value=搜索房屋 type=button
                                                                                               name=search></LABEL>
                    </LI>
                </UL>
            </DT>
            <DD>
                <UL>
                    <LI class=first>价格</LI>
                    <LI><SELECT id=price name=price>
                        <OPTION selected value="">不限</OPTION>
                        <OPTION value=0-100>100元以下</OPTION>
                        <OPTION
                                value=100-200>100元—200元
                        </OPTION>
                        <OPTION
                                value=200-1000000>200元以上
                        </OPTION>
                    </SELECT></LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>房屋位置</LI>
                    <LI><SELECT id=street name=street_id>
                        <OPTION selected
                                value="">不限
                        </OPTION>
                        <OPTION value=1000>知春路</OPTION>
                        <OPTION
                                value=1001>中关村大街
                        </OPTION>
                        <OPTION value=1002>学院路</OPTION>
                        <OPTION
                                value=1003>朝阳路
                        </OPTION>
                    </SELECT></LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>房型</LI>
                    <LI><SELECT id=housetype name=type_id>
                        <OPTION selected
                                value="">不限
                        </OPTION>
                        <OPTION value=1000>一室一厅</OPTION>
                        <OPTION
                                value=1001>一室两厅
                        </OPTION>
                        <OPTION value=1002>两室一厅</OPTION>
                        <OPTION
                                value=1003>两室两厅
                        </OPTION>
                    </SELECT></LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>面积</LI>
                    <LI><SELECT id=floorage name=floorage>
                        <OPTION selected
                                value="">不限
                        </OPTION>
                        <OPTION value=0-40>40以下</OPTION>
                        <OPTION
                                value=40-500>40-500
                        </OPTION>
                        <OPTION
                                value=500-1000000>500以上
                        </OPTION>
                    </SELECT></LI>
                </UL>
            </DD>
        </FORM>
    </DL>
</DIV>
<DIV id=position class=wrap>当前位置：云和租房网 - 浏览房源</DIV>
<DIV id=view class="main wrap">
    <DIV class=intro>
        <DIV class=lefter>
            <H1>${requestScope.house.title}</H1>
            <DIV class=subinfo>${requestScope.house.pubdate}</DIV>
            <DIV class=houseinfo>
                <P>户　　型：<SPAN>${requestScope.house.type.tname}</SPAN></P>
                <P>面　　积：<SPAN>${requestScope.house.area}m<SUP>2</SUP></SPAN></P>
                <P>
                    位　　置：<SPAN>${requestScope.house.location.province}-${requestScope.house.location.city}-${requestScope.house.location.district}</SPAN>
                </P>
                <P>联系方式：<SPAN>${requestScope.house.phone}</SPAN></P>
            </DIV>
            <div id="houseImg">
                <div class="imgBox thumb">
                    <div class="small">
                        <img src="../images/${requestScope.house.pic}" alt="暂无图片" width="80%">
                        <div class="mark"></div>
                    </div>
                    <div class="large">
                        <img src="../images/${requestScope.house.pic}" alt="暂无图片" width="80%">
                    </div>
                </div>
            </div>
        </DIV>

        <DIV class=side>
            <P><A class=bold href="http://www.baidu.com?kw=55" target="_blank">北京云和房地产经纪公司</A></P>
            <P>资质证书：有</P>
            <P>内部编号:1000</P>
            <P>联 系 人：${requestScope.house.user.uname}</P>
            <P>联系电话：<SPAN>暂无</SPAN></P>
            <P>手机号码：<SPAN>${sessionScope.user.phone}</SPAN></P></DIV>
        <DIV class=clear></DIV>
        <DIV class=introduction>
            <H2><SPAN><STRONG>房源详细信息</STRONG></SPAN></H2>
            <DIV class=content>
                <P>${requestScope.house.describ}</P></DIV>
        </DIV>
    </DIV>
</DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD>
    </DL>
</DIV>
</BODY>
<script type="text/javascript">
    $(function () {
        var $small = $(".small"),
            $mark = $(".mark"),
            $large = $(".large");
        $small.on("mouseover", function () {
            $mark.css("display", "block");
            $large.css("display", "inline-block");
        }).on("mousemove", function (e) {
// 在鼠标移到小图片中显示出mark ///////\\\\\\\\
            $mark.css("display", "block");
// 获取mark的一半宽度高度
            var hw = $mark.width() / 2,
                hh = $mark.height() / 2;
// 获取鼠标在当前图片中的位置
            var lf = e.pageX - $small.offset().left - hw,
                tt = e.pageY - $small.offset().top - hh;
// 获取mark的想x,y轴偏移率
            var ix = lf / $small.width(),
                iy = tt / $small.height();
// 获取边缘线
            var lb = 1 - hw / $small.width() * 2,
                tb = 1 - hh / $small.height() * 2;
// 计算和边缘的关系
            var ix = ix < lb ? ix > 0 ? ix : 0 : lb,
                iy = iy < tb ? iy > 0 ? iy : 0 : tb;
// 进行大图和小图百分比计算
            $mark.css("left", ix * 100 + "%").css("top", iy * 100 + "%");
            $large.children().css("left", -ix * 300 + "%").css("top", -iy * 300 + "%");
        }).on("mouseout", function () {
// 鼠标移出后mark隐藏
            $mark.css("display", "none");
            $large.css("display", "none");
        })
    })

    $("#serch").keyup(function () {
        $("#serchResult").show();
        var keyword = $(this).val(); //获取输入的值
        $.ajax({
            type: "post",
            url: "getInfo_getHouseByFuzzySerch",
            dataType: "JSON",
            data: {keyword: keyword},
            success: function (data) {
                $(".resultTitle").remove();
                $.each(data, function (index, obj) {
                    var div = "<div class='resultTitle'>" + obj.title + "</div>";
                    $("#serchResult").append(div);
                })
            }
        })
    })

    $(".resultTitle").live("mouseover mouseout click",function (event) {
        if (event.type == 'mouseover'){
            $(this).addClass("serchback");
        }
        if (event.type == 'mouseout'){
            $(this).removeClass("serchback");
        }
        if (event.type == 'click'){
            var keyword = $(this).text();
            $("#serchResult").hide(); //隐藏搜索结果
            $("#serch").val(keyword);
        }
    })
    $("#serch").click(function () {
        $("#serchResult").hide();
    })


</script>
</HTML>
